<template>
	<!-- 罐区部分 -->
	<view class="irri-area">
		<view class="uni-flex uni-row header">
			<image class="img" src="/static/image/mipmap-xhdpi/irri-area-icon.png" mode=""></image>
			<text class="text">{{name}}</text>
		</view>
		<view class="body">
			<uni-table class="table" :loading="loading" stripe emptyText="暂无阀门信息">
				<uni-tr class="tr">
					<uni-th class="th" width="200rpx" align="center">阀门</uni-th>
					<uni-th class="th" width="200rpx" align="center">开关</uni-th>
					<uni-th class="th" width="200rpx" align="center">电量</uni-th>
					<uni-th class="th" width="200rpx" align="center">信号</uni-th>
					<uni-th class="th" width="200rpx" align="center">状态</uni-th>
				</uni-tr>
				<template v-for="valve in valves">
					<uni-tr class="tr">
						<uni-td class="td" align="center">
							<text class="valve">{{valve.name}}</text>
						</uni-td>
						<uni-td class="td" align="center">
							<!-- <image class="switch" @click="changeSwitchState(valve)" :src="valve.switch ? switchOnPath : switchOffPath" mode=""></image> -->
							<vswitch
								class="switch"
								:value="valve.switch"
								@click="changeSwitchState(valve)"
								></vswitch>
						</uni-td>
						<uni-td class="td" align="center">
							<view class="text power">{{valve.power}} %</view>
						</uni-td>
						<uni-td class="td" align="center">
							<view class="text signal">{{valve.signal}}</view>
						</uni-td>
						<uni-td class="td" align="center">
							<view class="text state">{{valve.state}}</view>
						</uni-td>
					</uni-tr>
				</template>
			</uni-table>
		</view>
	</view>
</template>

<script>
	import vswitch from '@/components/vswitch.vue'
	export default {
		data() {
			return {
				// switchOnPath: require('@/static/image/mipmap-xhdpi/on.png'),
				// switchOffPath: require('@/static/image/mipmap-xhdpi/off.png')
				// switchOnPath: '../../static/image/mipmap-xhdpi/on.png',
				// switchOffPath: '../../static/image/mipmap-xhdpi/off.png',
				loading: false
			};
		},
		methods:{
			changeSwitchState(irri){
				this.$emit('change-switch-state', irri, this.id)
				// irri.switch = !irri.switch;
				this.loading = true;
				setTimeout(()=> {
					this.loading = false;
				}, 5000)
			}
		},
		watch:{
			valves:{
				handler(newValue){
					this.loading = false;
					// console.log(newValue)
				},
				deep: true
			}
		},
		props:{
			id:{
				type: Number,
				require: true,
				validator: (value) => {
					return value >= 0
				}
			},
			name: {
				type: String,
				require: true,
				validator: (value) => {
					return value.length > 0
				}
			},
			valves: {
				type: Array,
				require: true,
				validator: (values) => {
					if(values.length){
						let result = true;
						for(let i = 0; i < values.length; i++){
							let obj = values[i];
							if(obj instanceof Object){
								result &= typeof obj.name === 'string';
								result &= typeof obj.switch === 'boolean';
								result &= typeof obj.power === 'number';
								result &= (typeof obj.signal === 'string' || typeof obj.signal === 'number');
								result &= (typeof obj.state === 'string' || typeof obj.state === 'number');
								if(!result) return false;
							} else {
								return false;
							}
						}
						return result;
					}
					return true
				}
			}
		},
		components:{
			vswitch
		}
	}
</script>

<style lang="scss" scoped>
.irri-area{
	padding: 23.44rpx;
	background: #7DB6A8;
	border-radius: 11.72rpx;
	.header{
		justify-content: left;
		align-items: center;
		.img{
			width: 64.47rpx;
			height: 63.3rpx;
		}
		.text{
			padding-left: 25.79rpx;
			font-size: 46.89rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #1D786C;
		}
	}
	.body{
		max-height: 530rpx;
		max-height: 40vh;
		overflow: auto;
		margin-top: 16.41rpx;
		border-radius: 20rpx;
		.table{
			.tr{
				background-color: #F0FBF9;
				.th{}
				.td{
					vertical-align: middle;
					.valve{
						font-size: 18.75rpx;
						font-family: SourceHanSansCN;
						font-weight: 400;
						color: #1D786C;
					}
					.switch{
						width: 141.85rpx;
						height: 55.09rpx;
					}
					.text {
						width: 86.75rpx;
						height: 41.03rpx;
						font-size: 21.1rpx;
						background-color: #C6E1DD;
						border-radius: 11.72rpx;
						text-align: center;
					}
				}
			}
		}
	}
}
</style>